<template>
<div>
  <div>
    <Form ref="formData" :model="formData"  :label-width="80">
     <Row style="margin-top: 10px;">
       <Col span="8">
         <FormItem label="姓名" prop="name">
           <input v-model="formData.name"   placeholder="姓名"></input>
         </FormItem>
       </Col>
       <Col span="8" >
       <FormItem label="类型" prop="type">
         <select v-model="formData.type"  placeholder="请选择">
           <option value="成人">成人</option>
           <option value="学生">学生</option>
         </select>
       </FormItem>
       </Col>
       <Col span="8">
         <Divider type="vertical">
           <Button type="primary" @click="add">添加</Button>
           <Button type="primary" @click="removeBatch">删除</Button>
           <Button type="primary" @click="query">查询</Button>

         </Divider>
       </Col>
     </Row>
    </Form>
  </div>
  <div>
    <Table stripe ref="selection" :columns="columns" :data="rows"></Table>
  </div>
  <div class="paging">
    <Page :total="total" :page-size="pageSize" show-sizer show-elevator show-total
          @on-change="changePage" @on-page-size-change="changePageSize"></Page>
  </div>

</div>
</template>
<style scoped>
 .paging{
   float: right;
   margin-top: 10px;
 }
</style>
<script>
import {baseList} from '@/libs/crud/base-list'
export default {
   mixins:[baseList],
   data(){
     return{

       formData:{
         name:'',
         type:''
       },
       columns:[
         {
           type:'selection',
           width:60,
           align:'center'
         },
         {
           title:'姓名',
           key:'name'
         },{
         title: '类型',
           key:'type'
         },
         {
           title: '身份证号',
           key:'idCard'
         },
         {
           title: '状态',
           key: 'status'
         },
         {
           title: '创建时间',
           key:'createTime'
         },
         {
           title: '修改时间',
           key:'updateTime'
         },
         {
           title: '操作',
           key:'action',
           width: 150,
           align: "center",
           render:(h,params)=>{
             return h( 'div',[
               h('Button',{
                 props:{
                   type:'primary',
                   size:'small'
                 },
                 style:{
                   marginRight:'5px'
                 },
                 on:{
                   click:()=>{
                     this.edit(params.row.id)
                   }
                 }


               },'修改'),
               h('Button',{
                 props:{
                   type:'primary',
                   size:'small'
                 },
                 style:{
                   marginRight:'5px'
                 },
                 on:{
                   click:()=>{
                     this.remove(params.row.id,params.index)
                   }
                 }
               },'删除')
             ])
           }
         }
       ]
     }
   }
}
</script>

